<template>
    <div size="small" class="fixed" :style="{ backgroundColor: token.colorBgElevated }"  :class="[isOpenOutLine ? 'r0':'']" v-show="true" >
         <div class="_outline">
           <div :class="[isOpenOutLine ? '' : 'handleOutLine-hide']" v-if="true" class="handleOutLine" @click="() => isOpenOutLine = !isOpenOutLine">
             <RightCircleTwoTone  v-show="isOpenOutLine" style="font-size: 20px"/>
             <LeftCircleTwoTone v-show="!isOpenOutLine" style="font-size: 30px"  />
           </div>
           <span style="font-weight: 600">大纲</span>
         </div>
         <!--        <my-progress style="margin-top: 10px"  :process="c_process"/>-->
         <div ref="outline" class="outline">
           <vditor-out-line/>
         </div>
    </div>
</template>

<script lang="ts" setup>
import VditorOutLine from "@/components/Outline/vditorOutLine"
import { theme } from 'ant-design-vue';
import {LeftCircleTwoTone,RightCircleTwoTone} from '@ant-design/icons-vue';
const { useToken } = theme;
const { token } = useToken();
const isOpenOutLine = ref<boolean>(false);

</script>
<style lang="scss" scoped>
.vditor-outline{
  display: block !important;
  width: 100% !important;
  position: relative;
  left: -1rem;
  span{

  }

}


.outline{
  margin-top: 15px;
  overflow-y: scroll;
  font-size: 14px;
  width: 100%;
}
._outline{
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 100%;

}
.handleOutLine{
  position: absolute;
  left: 0;
  transition: all 0.5s;
  &:hover{
    cursor: pointer;
  }
}
.handleOutLine-hide{
  left: -12px !important;
  transform: translateX(-100%);
  z-index: 9999999;
  &:hover{
    cursor: pointer;
  }
  border-radius: 5px 0 0 5px;

}
.fixed {

  position: fixed;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: content-box;
  right: -200px;
  top: 50%;
  transform:translateY(-50%);
  width: 200px;
  padding: 12px !important;
  box-sizing: border-box;
  transition: right 0.5s;
  border-radius: 10px 0 0 10px !important;
  max-height: 80vh;
  .ps{
    max-height: 80vh;
  }
  &:hover{
  }
  /*中间的内容布结束*/

  .active{
    background-color: black !important;
  }

}

.r0{
  right: 0px !important;
}
</style>

